<template>
	<view class="buttom">
		<view class="footer">
			<!-- 首页 -->
			<view class="btn" @click="gotoIndex">
				<image v-if="pageid==1" class="img" src="@/static/image/index-choose.png" />
				<image v-if="pageid!=1" class="img" src="@/static/image/index-nochoose.png" />
				<span>首页</span>
			</view>
			<!-- 分类 -->
			<view class="btn" @click="gotoSort">
				<image v-if="pageid==2" class="img" src="@/static/image/sort-choose.png" />
				<image v-if="pageid!=2" class="img" src="@/static/image/sort-nochoose.png" />
				<span>分类</span>
			</view>
			<!-- 生活 -->
			<view class="btn" @click='gotoLife'>
				<image v-if="pageid==3" class="img" src="@/static/image/life-choose.png" />
				<image v-if="pageid!=3" class="img" src="@/static/image/life-nochoose.png" />
				<span>科普</span>
			</view>
			<!-- 购物车 -->
			<view class="btn" @click="gotoShop">
				<image v-if="pageid==4" class="img" src="@/static/image/shop-choose.png" />
				<image v-if="pageid!=4" class="img" src="@/static/image/shop-nochoose.png" />
				<span>购物车</span>
			</view>
			<!-- 我的 -->
			<view class="btn" @click="gotoUser">
				<image v-if="pageid==5" class="img" src="@/static/image/my-choose.png" />
				<image v-if="pageid!=5" class="img" src="@/static/image/my-nochoose.png" />
				<span>我的</span>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const pageid = ref(getApp().globalData.pageid)

	const gotoIndex = () => {
		getApp().globalData.pageid = 1
		uni.redirectTo({
			url: '/pages/index/index'
		});
	};
	const gotoSort = () => {
		getApp().globalData.pageid = 2
		uni.redirectTo({
			url: '/pages/product/product'
		});
	};
	const gotoLife = () => {
		getApp().globalData.pageid = 3
		uni.redirectTo({
			url: '/pages/life/life'
		});
	};
	const gotoShop = () => {
		getApp().globalData.pageid = 4
		uni.redirectTo({
			url: '/pages/shop/shop'
		});
	};
	const gotoUser = () => {
		getApp().globalData.pageid = 5
		uni.redirectTo({
			url: '/pages/user/my'
		});
	};
</script>

<style scoped>
	.buttom {
		position: fixed;
		/* buttom: 20rpx; */
		/* top: 0; */
		bottom: 0;
		width: 750rpx;
		z-index: 99;
	}
	.footer {
		/* margin-top: 6%; */
		background-color: white;
		height: 80px;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		border-radius: 28px 28px 0 0;
		padding: 1% 4%;
		position: relative;
	}
	.footer .btn {
		background-color: transparent;
		border: none;
		width: 90rpx;
		height: 70px;
		align-items: center;
	}
	.footer .btn span {
		font-size: 15px;
		font-weight: bold;
		color: #BCB3A8;
	}
	.footer .midImg {
		width: 70rpx;
		height: 80rpx;
	}
	.footer .img {
		width: 70rpx;
		height: 70rpx;
	}
</style>